<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="Application">
        <div>
            <input :value="inputText" @input="inputText = $event.target.value" />
            <p>{{inputText}}</p>
        </div>
        <my-alert title="按钮一" v-on:myclick="handleClick"></my-alert>
        <my-alert title="按钮二" @myclick="handleClick"></my-alert>
        <my-alert title="按钮三" @myclick="handleClick"></my-alert>
        <my-alert title="组件向父组件传递参数" v-on:myclick="handleClick2"></my-alert>
    </div>
    <script>
        const App = Vue.createApp({
            data(){
                return {
                    inputText: "",
                    number: 0
                }
            },
            methods:{
                handleClick(){
                    alert("按钮被点击了")
                },
                handleClick2(params){
                    console.log("按钮被点击了" + params)
                }
            }
        })
        const alertComponent = {
            data(){
                return {
                    msg:"警告框提示",
                    count:0
                }
            },
            methods:{
                click(){
                    this.count++
                    this.$emit('myclick', this.count)
                }
            },
            props:["title"],
            template:`<div><button @click="click">{{ count }}</button></div>`
        }
        App.component("my-alert", alertComponent)
        App.mount("#Application")
    </script>
</body>
